<template>
  <div class="page page-user">
    <div class="header">个人中心</div>
    <!-- 用户信息 -->
    <div class="profile">
      <div class="user-info">
        <div class="user-icon"><img src="../assets/garage.png" alt="头像"></div>
        <div class="user-box">
          <div class="user-name text-ellipsis">{{userInfo.userName}}</div>
        </div>
      </div>

      <div class="activity">
        <img src="../assets/user-icon.png" alt="">
        <span>我的奖金:{{ fenToYuan(personalRankInfo.rewardValue) || 0 }}元</span>
        <span class="line">|</span>
        <img src="../assets/qr-code.png" alt="">
        <span>扫码人数:{{ personalRankInfo.sharedCount || 0 }}人</span>
      </div>
      <div @click="toRanking" class="ranking-box">
        <div class="ranking">查看排行</div>
      </div>
    </div>

    <!-- 红包封口 -->
    <div class="red-packet-seal">
    </div>

    <!-- 红包 -->
    <div class="red-packet-body">
        <div class="activity-rule-box">
          <div v-if="isLoginOrregisterSuccess" class="publicity-text">邀请越多赚越多,不封顶!</div>
          <div v-else @click="showRule" class="activity-rule">活动规则 &gt;</div>
        </div>
        <router-link class="invite-button" to="./posters"></router-link>
    </div>


    <div v-if="isShowRule" class="popup">
     <div class="rule-popup-content">
       <div class="rule-title">活动规则</div>
       <div @click="popupClose" class="rule-close">
         <img src="../assets/rule-close.png" alt="关闭">
       </div>
       <div class="rule-content">
         <div class="subhead">关于新客礼包</div>
         <div class="rule-text">
           <p>1. 活动时间：2017年12月20日-2018年1月31日</p>
           <p>2. 符合条件的客户进入活动后可以获得新客礼包，礼包含以下内容:</p>
           <p>无门槛体验券&nbsp;&nbsp; 满50减50*2</p>
           <p>商城囤货体验券 满388减100*1</p>
           <p>询单专享体验券 满588减100*1</p>
           <p>商城囤货券&nbsp;&nbsp;&nbsp;满1888减100*1  满2888减200*1 满3888减400*1</p>
           <p>询单专享券&nbsp;&nbsp;&nbsp;满1888减100*1  满2888减200*1 满3888减400*1</p>
           <p>开思币：188个</p>
           <p>3. 优惠券获得与有效期：实时到账，领取后30天内使用有效</p>
           <p>4. 开思币获得与有效期：实时到账，长期有效</p>
           <p>5. 用户领取礼包后，奖励自动同步至开思汽配电脑端、APP端、微信端的商城，采购配件时均可使用</p>
           <p>6. 优惠券使用后，若取消订单或者产生退货，优惠券不予返还</p>
           <p>7. 每个订单限用1张优惠券，采购时请注意优惠券的使用范围</p>
           <p>8.新客定义：</p>
           <p>（1）上个自然月内询价数&lt;=3 且无订单的客户；</p>
           <p>（2）新注册用户</p>
         </div>
         <div class="subhead">关于推广奖励</div>
         <div class="rule-text">
           <p>1. 活动时间：2017年12月20日-2018年1月31日</p>
           <p>2. 所有在开思平台每个成功注册并认证的用户，均可成为推广者</p>
           <p>3. 推广者在活动中生成个人的专属二维码，通过该二维码进入的用户成功注册并下单，推广者即可获得80元话费红包奖励，
             可累加，例：3个用户通过推广者A的二维码进入活动页面，均注册认证成功后，
             各自下了一个或以上数量的订单，则A可以获得80*3=240元话费</p>
           <p>4. 话费红包将在活动结束后5个工作日内进行统一发放</p>
         </div>
         <div class="cass-text"><p>本次活动最终解释权归深圳开思时代科技有限公司所有</p></div>
       </div>
     </div>
    </div>

    <div v-if="isLoginOrregisterSuccess" class="popup success-popup">
     <div class="success-box">
       <div class="success-popup-content">
         <div @click="popupClose" class="rule-close">
           <img src="../assets/rule-close.png" alt="关闭">
         </div>
         <div class="success-icon"></div>
         <div class="success-success">{{successText}}</div>
         <div class="success-text">
           <span>欢迎来到开思,</span>
           <span class="gift-bag">1888元臻享福利礼包</span>
           <span>已放入您的账户了，在开思汽配的官网、APP以及公众号均可以使用</span>
         </div>
         <div class="success-btn">
           <div class="success-order" @click="goWechat">{{successhandle}}</div>
           <div @click="popupClose" class="success-stroll">再逛逛</div>
         </div>
       </div>
     </div>
    </div>
  </div>
</template>

<script>
  import logger from '../utils/logger';
  import { ACTION_ID } from '../../config/action';
  import { getRewardList, getPropagationList } from '../api/user';
  const successInfo = {
    login: '登录成功!',
    loginText: '立即去下单',
    register: '注册成功!',
    registerText: '立即去认证'
  };

  export default {
    data() {
      return {
        isShowRule: false,
        isLoginOrregisterSuccess: false,
        successText: '',
        successhandle: '',
        userInfo: window._META_INFO.user || {},
        personalRankInfo: {
          rewardValue: window._META_INFO.rewardValue,
          sharedCount: window._META_INFO.sharedCount
        }
      };
    },
    methods: {
      popupClose() {
        this.isShowRule = false;
        this.isLoginOrregisterSuccess = false;
      },
      showRule() {
        this.isShowRule = true;
      },
      toRanking() {
        this.$router.push('/rank');
      },
      fenToYuan(fen) {
        return parseInt(fen / 100, 10);
      },
      goWechat() {
        window.location = `http://${window._META_INFO.wxHost}/wechat?#/tabs/home`;
      },
      async getRankData() {
        const rewardInfo = await getRewardList();
        const result = await getPropagationList();
        window._META_INFO = Object.assign(window._META_INFO,
          { rewardValue: rewardInfo.data.rewardValue },
          { sharedCount: result.data.sharedCount },
          { rewardPosition: rewardInfo.data.position });
        this.personalRankInfo = { rewardValue: rewardInfo.data.rewardValue, sharedCount: result.data.sharedCount };
      }
    },
    created() {
      if (!window._META_INFO || !window._META_INFO.user) {
        this.$router.push('/login');
        return;
      }
      const context = window._META_INFO.context;
      this.getRankData();
      // 将url替换成自己的
      try {
        history.replaceState({}, '页面标题', `/actions/${ACTION_ID}?ctxId=${context.id}`);
      } catch (e) {
        logger.error('history.replaceState出错', e);
      }
      if (this.$route.query.origin === 'LOGIN') {
        this.successText = successInfo.login;
        this.successhandle = successInfo.loginText;
        this.isLoginOrregisterSuccess = !!window._META_INFO.rewards;
      } else if (this.$route.query.origin === 'REGISTER') {
        this.successText = successInfo.register;
        this.successhandle = successInfo.registerText;
        this.isLoginOrregisterSuccess = !!window._META_INFO.rewards;
      }
    }
  };
</script>

<style scoped>
.page-user {
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  width: 100%;
  min-height: 1rem;
  font-size: 0.36rem;
  background: #4aa9e1;
  color: #fff;
  justify-content: center;
  align-items: center;
}

.profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url(../assets/user/red-packet-arc.png) no-repeat bottom,
    linear-gradient(to bottom right, #5691e4, #3ac9dd);
  background-size: contain;
  min-height: 4rem;
}

.red-packet-seal {
  height: 4.55rem;
  font-size: 0;
  background-color: #F98B2A;
  background-image: url(../assets/user/red-packet-seal.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.red-packet-seal img {
  width: 100%;
  height: 100%;
}

.red-packet-body {
  display: flex;
  flex: 3;
  flex-direction: column;
  justify-content: space-between;
  background: url(../assets/user/red-packet-body.png) no-repeat top, #fc5e1d;
  background-size: 100%;
  min-height: 2rem;
}

.user-info {
  margin-top: 0.3rem;
  display: flex;
}

.user-box {
  color: #ffffff;
}

.user-icon img {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.54rem;
}

.user-name {
  font-size: 0.42rem;
  line-height: 1.5rem;
}

.user-sign {
  height: 0.38rem;
  width: 1.38rem;
  border: 1px solid #fff;
  border-radius: 0.2rem;
  font-size: 0.22rem;
  text-align: center;
  line-height: 0.38rem;
}
.activity {
  color: #ffffff;
  display: inline-block;
  vertical-align: middle;
  font-size: 0.3rem;
  margin: 0.24rem;
}

.activity img {
  width: 0.25rem;
  height: 0.25rem;
}

.activity .line {
  margin: 0 0.27rem;
}

.ranking-box {
  color: #ffffff;
  width: 100%;
  display: flex;
  justify-content: center;
}

.ranking {
  text-align: center;
  line-height: 0.48rem;
  border: 1px solid #fff;
  height: 0.48rem;
  width: 2.4rem;
  font-size: 0.28rem;
  border-radius: 0.26rem;
}
.content {
  position: relative;
  width: 100%;
}

.content-info {
  width: 100%;
  position: absolute;
  left: 0;
  top: -0.48rem;
  height: 8.82rem;
  background-image: url("../assets/user-foot-bg.png");
  -webkit-background-size: contain;
  background-size: 100%;
  background-repeat: no-repeat;
}

.text-order {
  margin: 2.9rem 0 0 1.1rem;
  font-weight: 600;
  font-size: 0.38rem;
  color: #686868;
}

.red-envelope {
  font-weight: 800;
  margin-left: 1.2rem;
  font-size: 0.81rem;
  color: #f98728;
}

.activity-rule-box {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
}

.activity-rule {
  font-size: 0.28rem;
  color: #686868;
  text-align: center;
  border-bottom: 0.02rem solid #686868;
}

.publicity-text {
  font-size: 0.32rem;
}

.invite-button {
  height: 1.5rem;
  background: url(../assets/user/invite-button.png) no-repeat center;
  background-size: contain;
  margin: 0 1rem;
}

.popup {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.62);
}

.rule-popup-content {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 1.1rem;
  bottom: 1.1rem;
  left: 0.35rem;
  width: 6.8rem;
  border-radius: 0.3rem;
  background-color: #fff;
}

.rule-title {
  margin-bottom: 0.24rem;
  width: 100%;
  height: 1.23rem;
  background-image: url("../assets/rule-title.png");
  -webkit-background-size: contain;
  background-size: 100%;
  background-repeat: no-repeat;
  text-align: center;
  line-height: 1.23rem;
  color: #fff;
  font-size: 0.6rem;
}

.rule-content {
  width: 100%;
  height: 9rem;
  overflow-y: scroll;
}

.subhead {
  margin: 0 0 0.24rem 0;
  width: 2.8rem;
  height: 0.66rem;
  background-image: url("../assets/rule-subhead.png");
  -webkit-background-size: contain;
  background-size: 100%;
  background-repeat: no-repeat;
  text-align: center;
  line-height: 0.66rem;
  color: #fff;
  font-size: 0.32rem;
}

.rule-close {
  background: #fff;
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  width: 0.76rem;
  height: 0.76rem;
  border-radius: 0.5rem;
}

.rule-close img {
  width: 0.76rem;
  height: 0.76rem;
}

.rule-text {
  padding: 0 0.56rem 0 0.48rem;
  font-size: 0.26rem;
  color: #686868;
}

.rule-content p {
  line-height: 0.4rem;
}

.cass-text {
  padding: 0 0.56rem 0 0.48rem;
  margin-top: 0.24rem;
  font-size: 0.24rem;
  color: #686868;
}

.success-popup {
  display: flex;
  justify-content: center;
  align-items: center;
}

.success-popup-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 5.06rem;
  height: 6.47rem;
  background-image: url("../assets/success-bg.png");
  -webkit-background-size: contain;
  background-size: 100%;
  background-repeat: no-repeat;
}

.success-box {
  position: relative;
}

.success-icon {
  margin-top: 0.3rem;
  width: 1.36rem;
  height: 1.36rem;
  background-image: url("../assets/success.png");
  -webkit-background-size: contain;
  background-size: 100%;
  background-repeat: no-repeat;
}

.success-success {
  margin: 0.3rem 0 0.46rem 0;
  font-size: 0.46rem;
  color: #686868;
}

.success-text {
  font-size: 0.26rem;
  color: #686868;
  padding: 0 0.46rem;
  margin-bottom: 0.6rem;
}

.gift-bag {
  color: #5a87e5;
  font-weight: 600;
}

.success-btn {
  display: flex;
}

.success-order,
.success-stroll {
  width: 1.75rem;
  height: 0.5rem;
  text-align: center;
  line-height: 0.5rem;
  font-size: 0.26rem;
  color: #fff;
  background-image: url("../assets/success-btn.png");
  -webkit-background-size: contain;
  background-size: 100%;
  background-repeat: no-repeat;
}

.success-order {
  margin-right: 0.25rem;
}
</style>
